<template>
  <div>
    <vab-card shadow="always" class="shadow">
      <template #header>
        <div class="flex_sb">
          <span class="leve2_title">信用额度</span>
          <el-button size="small" type="primary" @click="handleOpen()">
            充值
          </el-button>
        </div>
      </template>

      <el-row v-if="creditForm" :gutter="24">
        <el-col :span="8" v-bind="colLayout">
          <div class="detail-mode">
            <span class="label">信用额度</span>
            <span class="text" :title="creditForm.credit_limit">
              {{ creditForm.credit_limit || '--' }}
            </span>
          </div>
        </el-col>
        <el-col :span="8" v-bind="colLayout">
          <div class="detail-mode">
            <span class="label">信用余额</span>
            <span class="text" :title="creditForm.credit_balance">
              {{ creditForm.credit_balance || '--' }}
            </span>
          </div>
        </el-col>
        <el-col :span="8" v-bind="colLayout">
          <div class="detail-mode">
            <span class="label"><el-link>信用额度变更详情</el-link></span>
          </div>
        </el-col>
      </el-row>
    </vab-card>
    <!-- 充值 -->
    <RechargeDialog ref="rechargeDialogRef" @refresh="() => {}" />
  </div>
</template>
<script lang="ts" setup>
  import RechargeDialog from '~/src/components/RechargeDialog.vue'
  /**
   * @var
   */

  const colLayout = {
    xs: 12,
    sm: 12,
    md: 12,
    lg: 8,
    xl: 8,
  }

  const creditForm = ref<any>(null)
  const rechargeDialogRef = ref()

  /**
   * @method
   */

  //更新数据
  const updateData = ({ credit_balance, credit_limit }: any) => {
    creditForm.value = {
      credit_balance,
      credit_limit,
    }
  }
  //重置数据
  const resetData = () => {
    creditForm.value = {
      credit_limit: '--',
      credit_balance: '--',
    }
  }

  const handleOpen = () => {
    rechargeDialogRef.value.open()
  }

  defineExpose({
    updateData,
    resetData,
  })
</script>
